<template>
    <div class="form-container">
        <el-card class="form-card" shadow="always">
            <h2 class="form-title">修改美食</h2>

            <el-form :model="newFoodItem" :rules="rules" ref="foodForm" label-width="100px">
                <!-- 名称 -->
                <el-form-item label="菜品名称" prop="name">
                    <el-input v-model="newFoodItem.name" placeholder="请输入菜品名称"></el-input>
                </el-form-item>

                <!-- 分类 -->
                <el-form-item label="分类" prop="category">
                    <el-select v-model="newFoodItem.category" placeholder="请选择分类">
                        <el-option label="小吃" value="小吃"></el-option>
                        <el-option label="主菜" value="主菜"></el-option>
                        <el-option label="甜点" value="甜点"></el-option>
                        <el-option label="饮品" value="饮品"></el-option>
                    </el-select>
                </el-form-item>

                <!-- 主要食材 -->
                <el-form-item label="食材" prop="ingredients">
                    <el-select v-model="newFoodItem.ingredients" multiple placeholder="请选择食材">
                        <el-option label="红薯粉" value="红薯粉"></el-option>
                        <el-option label="花生" value="花生"></el-option>
                        <el-option label="醋" value="醋"></el-option>
                        <el-option label="辣椒油" value="辣椒油"></el-option>
                    </el-select>
                </el-form-item>

                <!-- 价格 -->
                <el-form-item label="价格" prop="price">
                    <el-input v-model="newFoodItem.price" placeholder="请输入价格" suffix-icon="el-icon-money"></el-input>
                </el-form-item>

                <!-- 评分 -->
                <el-form-item label="评分" prop="rating">
                    <el-rate v-model="newFoodItem.rating" show-text></el-rate>
                </el-form-item>

                <!-- 辣度 -->
                <el-form-item label="辣度" prop="spice_level">
                    <el-select v-model="newFoodItem.spice_level" placeholder="请选择辣度">
                        <el-option label="无辣" value="无辣"></el-option>
                        <el-option label="微辣" value="微辣"></el-option>
                        <el-option label="中辣" value="中辣"></el-option>
                        <el-option label="特辣" value="特辣"></el-option>
                    </el-select>
                </el-form-item>

                <!-- 烹饪时间 -->
                <el-form-item label="烹饪时间" prop="cooking_time">
                    <el-input v-model="newFoodItem.cooking_time" placeholder="例如：10分钟"></el-input>
                </el-form-item>

                <!-- 描述 -->
                <el-form-item label="描述" prop="description">
                    <el-input type="textarea" v-model="newFoodItem.description" placeholder="请输入菜品描述，介绍特点"></el-input>
                </el-form-item>

                <!-- 图片上传 -->
                <el-form-item label="图片" prop="image">
                    <el-upload action="#" list-type="picture-card" :auto-upload="false" :on-preview="handlePreview"
                        :on-remove="handleRemove">
                        <img style="width: 140px;height:155px;" v-if="newFoodItem.image" :src="newFoodItem.image"
                            alt="">
                        <i v-else class="el-icon-plus"></i>
                    </el-upload>
                </el-form-item>

                <!-- 提交按钮 -->
                <el-form-item>
                    <el-button type="primary" @click="submitForm">提交</el-button>
                    <el-button @click="resetForm">返回主页</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script setup>
import { ref } from "vue";
import { ElMessage } from "element-plus";
import { useRoute, useRouter } from "vue-router";
const route = useRoute()
const router = useRouter()

const resetForm = () => {
    router.push("/food-index")
}

const { query } = route
console.log(query);


const localData = ref(JSON.parse(localStorage.getItem("sys_foot")))

const foot = ref(localData.value.find(item => item.id == query.footId))



const newFoodItem = ref({
    id: foot.value.id,
    name: foot.value.name,
    category: foot.value.category,
    ingredients: foot.value.ingredients,
    price: foot.value.price,
    rating: foot.value.rating,
    spice_level: foot.value.spice_level,
    cooking_time: foot.value.cooking_time,
    description: foot.value.description,
    image: foot.value.image
});

const rules = {
    name: [{ required: true, message: "请输入菜品名称", trigger: "blur" }],
    category: [{ required: true, message: "请选择分类", trigger: "change" }],
    ingredients: [{ required: true, message: "请选择至少一种食材", trigger: "change" }],
    price: [{ required: true, message: "请输入价格", trigger: "blur" }],
    description: [{ required: true, message: "请输入菜品描述", trigger: "blur" }]
};

const foodForm = ref(null);

const submitForm = () => {
    foodForm.value.validate((valid) => {
        if (valid) {
            // 获取数组下标
            const footIndex = localData.value.findIndex(item => item.id == query.footId)
            // 更新数据
            localData.value[footIndex] = { ...newFoodItem.value };
            localStorage.setItem('sys_foot', JSON.stringify(localData.value))
            ElMessage.success("提交成功！");
            setTimeout(() => {
                router.push("/food-index")
            }, 2000)
        } else {
            ElMessage.error("请填写完整的表单信息！");
        }
    });
};


const handlePreview = (file) => {
    console.log("预览图片", file);
};

const handleRemove = (file) => {
    console.log("移除图片", file);
};
</script>

<style scoped>
.form-container {
    max-width: 600px;
    margin: 20px auto;
}

.form-card {
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
    background-color: #ffffff;
}

.form-title {
    font-size: 1.8em;
    font-weight: bold;
    color: #333;
    text-align: center;
    margin-bottom: 20px;
}

.el-form-item {
    margin-bottom: 20px;
}

.el-button {
    font-size: 1em;
}

.el-input,
.el-select,
.el-rate,
.el-upload {
    width: 100%;
}
</style>